<!-- 引入编辑器的插件 -->
<link rel="stylesheet" href="/static/kindeditor/themes/default/default.css">
<script src="/static/kindeditor/kindeditor-all-min.js"></script>
<script src="/static/kindeditor/lang/zh-CN.js"></script>
<!--页面主要内容-->
<main class="lyear-layout-content">
      
    <div class="container-fluid p-t-15">
      
      <div class="row">
        <div class="col-lg-12">
          <div class="card">
            <div class="card-body">
              
              <form method="post" class="row" enctype="multipart/form-data" id="form">
                <div class="form-group col-md-12">
                  <label for="typeid">分类</label>
                  <div class="form-controls">
                    <select name="typeid" class="form-control" id="typeid">
                      <option value="0">请选择</option>
                      {foreach $TypeList as $item}
                        <option value="{$item.id}">{$item.name}</option>
                      {/foreach}
                    </select>
                  </div>
                </div>
                <div class="form-group col-md-12">
                  <label for="name">商品名称</label>
                  <input type="text" class="form-control" id="name" name="name" value="" placeholder="请输入商品名称" />
                </div>
                <div class="form-group col-md-12">
                  <label for="price">商品原价</label>
                  <input type="text" class="form-control" id="price" name="price" value="" placeholder="请输入商品价格" />
                </div>
                <div class="form-group col-md-12">
                  <label for="stock">商品库存</label>
                  <input type="text" class="form-control" id="stock" name="stock"  value="" placeholder="请输入商品库存">
                </div>

                <div class="form-group col-md-12">
                  <label for="flag">商品状态</label>
                  <div class="clearfix">
                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" id="flagOne" name="flag" value="1" class="custom-control-input" checked>
                      <label class="custom-control-label" for="flagOne">新品</label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" id="flagTwo" name="flag" value="2" class="custom-control-input">
                      <label class="custom-control-label" for="flagTwo">热销</label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" id="flagThree" name="flag" value="3" class="custom-control-input">
                      <label class="custom-control-label" for="flagThree">热销</label>
                    </div>
                  </div>
                </div>

                <div class="form-group col-md-12">
                  <label>多图上传</label>
                  <div class="form-controls">
                    
                    <ul class="list-inline row lyear-uploads-pic mb-0">
                     
                      
                      <!-- <li class="col-6 col-md-4 col-lg-2">
                        <input type="file" name="cover" id="cover" hidden multiple>
                        <a class="pic-add" id="add-pic-btn" onclick="cover.click()" title="点击上传"></a>
                      </li> -->
                    </ul>
                    
                    <input type="file" class="form-control" id="cover" name="cover" value="" multiple hidden />
                    <img class="img-thumbnail d-block" id="img" onclick="cover.click()" style="width: 200px;" src="/static/admin/images/upload.png" alt="">
                  </div>
                </div>
                
                <div class="form-group col-md-12">
                  <label for="content">内容</label>
                  <textarea id="content" name="content" placeholder="请输入帖子详细内容" style="width: 100%;height: 300px;"></textarea>
                </div>

                <div class="form-group col-md-12">
                  <button type="button" class="btn btn-primary" id="btn">确 定</button>
                  <button type="button" class="btn btn-default" onclick="javascript:history.back(-1);return false;">返 回</button>
                </div>
              </form>
     
            </div>
          </div>
        </div>
        
      </div>
      
    </div>
  
  </main>
  <!--End 页面主要内容-->

  <script>
    //实例化网页编辑器
    var editor;

    KindEditor.ready(function(K){
      //创建一个网页编辑器
      editor = K.create('textarea[name="content"]', {
        allowFileManager : true
      })
      
    })

    let urlArr = []

    var coverArr = []

    

    $('#cover').change(function(){
      let files = $(this)[0].files ? $(this)[0].files : {}

      for(let item of files)
      {
        let url = GetObjectURL(item)
        coverArr.push(item)
        urlArr.push(url)
      }
      
      let img = ''

      urlArr.forEach((item) => {
        img+= `
        <li class="col-6 col-md-4 col-lg-2">
          <figure>
            <img src="${item}" alt="">
            <figcaption>
              <a class="btn btn-round btn-square btn-primary see"><i class="mdi mdi-eye"></i></a>
              <a class="btn btn-round btn-square btn-danger del"><i class="mdi mdi-delete"></i></a>
            </figcaption>
          </figure>
        </li>
        `
      })

      $('.lyear-uploads-pic').html(img)

    })


   $('.lyear-uploads-pic').on('click','.see',function(){
     let file = $(this).parent().prev('img').attr('src')
     $.confirm({
       title:'查看图片',
       content:`
        <img src="${file}">
       `,
       buttons:{
        cancel: {
            text: '关闭',
            btnClass: 'btn-danger'
        }
       }
     })
   })

   

   $('.lyear-uploads-pic').on('click','.del',function(){
    let file = $(this).parent().prev('img').attr('src')
    let files = $('#cover')[0].files ? $('#cover')[0].files : {}
    for(let i = 0;i < urlArr.length;i++)
    {
      if(file == urlArr[i])
      {
        coverArr.splice(i,1)
      }
    }
    $(this).parent().parent().parent().remove()

   })


   $('#btn').click(function(){

      editor.sync();

      var form = document.querySelector("#form")

      let formData = new FormData(form)

      if(coverArr)
      {
        coverArr.forEach((item) => {
          formData.append('coverArr[]',item)
        })
      }

      $.ajax({
        type:'post',
        url:`{:url('admin/product/add')}`,
        data:formData,
        dataType:'json',
        cache: false,
        processData: false,
        contentType: false,
        success:function(result)
        {
          if (result.code === 1) {
            $.notify({
                message: result.msg,
            }, {
              delay: 1000,
              type: 'success',
              onClose: function () {
                location.href = result.url
              }
            })
          } else {
            $.notify({
              message: result.msg,
            }, {
              delay: 1000,
              type: 'warning'
            })
          }
        }
      })
   })

   

    
  </script>